<template>
  <div class="app-container">
            <div class="cbox">
              <el-form class="form" :model="from" ref="flt" :rules="rules" label-width="11rem" size="mini">
                <el-row :gutter="15" class="row">
                  <el-col :span="4">
                    <el-form-item label="供应商名称：">
                      <el-input   placeholder="请输入供应商名称"  v-model="from.gysName" style="width: 100%" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="管理员名称：">
                      <el-input   placeholder="请输入管理员名称" v-model="from.glyName" style="width: 100%" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <el-form-item label-width="10px">
                      <el-button @click="searchType" type="primary">查询</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <el-row :gutter="10" class="btn-area">
                <el-col :span="24">
                  <el-button size="mini" type="success" plain @click="add">新增账号</el-button>
                  <el-button size="mini" type="primary" plain @click="del('diong')">编辑账号</el-button>
                  <el-button size="mini" type="danger" plain @click="examine">删除账号</el-button>
                  <el-button plain size="mini" type="primary" @click="cancel">密码重置</el-button>
                  <el-button plain size="mini" type="primary" @click="viewDetails">刷新</el-button>
                </el-col>
            </el-row>
            <div class="table">
            <div class="inner" ref="inner">
                  <el-table
                      :data="DetailedData"
                      border
                      :height="maxHeight"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      @row-dblclick='rowdbClick'
                      @row-click="rowClick">
                      <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="fltCode" show-overflow-tooltip label="供应商账号"></el-table-column>
                      <el-table-column prop="fltName" show-overflow-tooltip label="供应商名称"></el-table-column>
                      <el-table-column prop="usrCode" show-overflow-tooltip label="管理员账号"></el-table-column>
                      <el-table-column prop="usrName" show-overflow-tooltip label="管理员名称"></el-table-column>
                      <el-table-column prop="usrCellphone" align="center" show-overflow-tooltip label="联系电话"></el-table-column>
                      <el-table-column prop="usrEmail" align="center" show-overflow-tooltip label="邮箱"></el-table-column>
                      <el-table-column prop="usrStatus" align="center" show-overflow-tooltip label="状态">
                        <template slot-scope="scope">
                          <div v-if="scope.row.usrStatus == 'Y'">可用</div>
                          <div v-if="scope.row.usrStatus == 'N'">不可用</div>
                        </template>
                      </el-table-column>
                  </el-table>
                </div>
          </div>
         <!-- 分页 -->
            <el-pagination
              class="pagination"
              small
              background
              ref="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Pagination.currentPage"
              :page-sizes="Pagination.pageSizeList"
              :page-size="Pagination.pageSize"
              :layout="Pagination.layout"
              :total="Pagination.total"
            ></el-pagination>
        <!-- 弹出框 新增 编辑 -->
        <el-dialog
          width="50%"
          v-el-drag-dialog
          :title='addText'
          :visible.sync="addShowA"
          v-if="addShowA"
          :close-on-click-modal="false">
              <el-form  label-width="14rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                  <el-row >
                        <el-col :span="24">
                          <el-form-item label="供应商名称：" prop="fltName">
                             <el-input maxlength="32" :disabled='disabledA' placeholder="请点击选择供应商名称" :readonly='readonly' v-model="xzData.fltName" clearable @click.native='focus'></el-input>
                          </el-form-item>
                        </el-col>
                    </el-row>
                <div v-show="show">
                  <el-row>
                    <el-col :span="24">
                        <el-form-item prop="usrCode" label="管理员账号：">
                          <el-input maxlength="32" :disabled='disabled' v-model="xzData.usrCode" clearable></el-input>
                        </el-form-item>
                    </el-col>
                  </el-row>
                    <el-row>
                       <el-col :span="24">
                            <el-form-item prop="usrName" label="管理员名称：">
                              <el-input maxlength="32" :disabled='disabled' v-model="xzData.usrName" clearable></el-input>
                            </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                            <el-form-item prop="usrCellphone" label="联系电话：">
                              <el-input maxlength="32" :disabled='disabled' v-model="xzData.usrCellphone" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="usrEmail" label="邮箱：">
                              <el-input maxlength="32" :disabled='disabled' v-model="xzData.usrEmail" clearable></el-input>
                            </el-form-item>
                          </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                          <el-form-item label="状态：" prop="usrStatus">
                              <el-select  filterable :disabled='disabled' allow-create clearable v-model="xzData.usrStatus" >
                                <el-option
                                  v-for=" item in listData"
                                  :key="item.usrStatus"
                                  :value="item.usrStatus"
                                  :label="item.cCName"
                                ></el-option>
                              </el-select>
                          </el-form-item>
                        </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item prop="usrRemark" label="备注：">
                        <el-input maxlength="32" :disabled='disabled' type="textarea" v-model="xzData.usrRemark" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
                <div slot="footer" class="dialog-footer" v-if="show">
                    <el-button size="mini" type="primary"  v-if="see" @click="saveEditor('xzData')">保存</el-button>
                    <el-button size="mini"  @click="close">关闭</el-button>
                </div>
                <div v-show="showA" style="padding-left: 42px;">
                    <el-form class="form" :model="fromA" ref="flt" :rules="rules" label-width="9rem" size="mini">
                      <el-row :gutter="15" class="row">
                        <el-col :span="11">
                          <el-form-item label="供应商名称：" label-width="10rem">
                            <el-input   placeholder="请输入供应商名称" v-model="fromA.gysName" style="width: 100%" clearable></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="11">
                          <el-form-item label="所属港/站：">
                            <el-input   placeholder="请输入所属港" v-model="fromA.ssgzName" style="width: 100%" clearable></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="1">
                          <el-form-item label-width="5px">
                            <el-button @click="searchTypeA" type="primary">查询</el-button>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                    <div class="table">
                        <div class="inner" ref="innerA">
                              <el-table
                                  :data="DetailedDataA"
                                  border
                                  :height="300"
                                  :header-cell-style="{ textAlign: 'center' }"
                                  highlight-current-row
                                  @row-click='rowdbClickA'>
                                  <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                                   <el-table-column prop="fltName" show-overflow-tooltip label="供应商名称"></el-table-column>
                                  <el-table-column prop="fltPorts" show-overflow-tooltip label="所属港/站"></el-table-column>
                                  <el-table-column prop="fltLinkperson" show-overflow-tooltip label="联系人"></el-table-column>
                                  <el-table-column prop="fltLinkphone" align="center" show-overflow-tooltip label="联系电话"></el-table-column>
                              </el-table>
                            </div>
                      </div>
                      <div slot="footer" class="dialog-footer box" v-if="showB">
                          <el-button size="mini"  @click="closeA">关闭</el-button>
                      </div>
                      <!-- 分页 -->
                    <!-- <div>
                        <el-pagination
                          class="pagination"
                          small
                          background
                          ref="pagination"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="Pagination.currentPage"
                          :page-sizes="Pagination.pageSizeList"
                          :page-size="Pagination.pageSize"
                          :layout="Pagination.layout"
                          :total="Pagination.total"
                        ></el-pagination>
                    </div> -->
              </div>
        </el-dialog>
  </div>
</template>

<script>
import {
  SupplieManagList,
  addSupplieManag,
  editSupplieManag,
  deleSupplieManag,
  czSupplieManag,
  getSysCompanyInfo
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
export default {
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      from:{
        gysName:'',
        glyName:''
      },
      fromA:{
        gysName:'',
        ssgzName:''
      },
      readonly:true,
      show:true,
      showA:false,
      showB:false,
      disabledA:false,
      disabled:false,
      maxHeight: -1,
      diong:'E',
      addText:'',
      addShowA:false, // 新增 编辑
      see:true, //保存按钮
      DetailedData:[], //主列表的数据
      xzData:[],// 传给新增 编辑弹出框的数据
      DetailedDataA:[],
      listData:[
        {usrStatus:'Y',cCName:'可用'},
        {usrStatus:'N',cCName:'不可用'},
      ],
      itemData:[], //主列表当前行数据
      ListData:[], //弹出框列表当前行数据
      //表单验证 新增 编辑
      addRules:{
        fltName:[
          { required: true, message: '请选择供应商名称', trigger:'change'}
        ],
        usrCode:[
          { required: true, message: '请填写管理员账号', trigger:'blur'}
        ],
        usrName:[
          { required: true, message: '请填写管理员名称', trigger:'blur'}
        ],
        usrCellphone: [
          {
            pattern: /^[0-9]+$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        usrEmail: [
          {
            pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
            message: '请输入正确的Email',
            trigger: 'blur'
          },
        ],
      },
    }
  },
  created(){
    this.refreshList()

    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){

  },
  methods:{
    focus(){
      this.show = false
      this.showA = true
      this.showB = true
    },
    // 点击搜索
    searchType(){
      this.refreshList()
    },
    searchTypeA(){
      this.postList()
    },
    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      SupplieManagList({
        fltName: this.from.gysName,
        usrName:this.from.glyName,
        PageIndexs:this.Pagination.currentPage.toString(),
        PageSizes:this.Pagination.pageSize.toString()
      }).then(response => {
        this.DetailedData = response.data
        updateTotal(Number(response.total))
      })
    },
    //弹出框列表数据
    postList(){
      let PageSizes=this.Pagination.pageSize.toString()
      let PageIndexs=this.Pagination.currentPage.toString()
      getSysCompanyInfo({
        fltName:this.fromA.gysName,
        fltPorts:this.fromA.ssgzName,
        PageSizes:PageSizes,
        PageIndexs:PageIndexs,
      }).then(res =>{
        this.DetailedDataA = res.data.FTKJWLHYPT
        // this.Pagination.total=res.data.total.FTKJWLHYPT
      })
    },
    //新增
    add(){
      this.addText='新增账号'
      this.diong=''
      this.addShowA=true
      this.disabledA = false
      this.disabled = false
      this.see=true
      this.xzData = {
        usrEtpId:this.ListData.fltId,
        usrName:'',
        usrCode:'',
        fltName:'',
        usrCellphone:'',
        usrEmail:'',
        usrStatus:'Y',
        usrRemark:'',
      }
      this.postList()
    },
    //编辑
    del(){
      if (Object.keys(this.itemData).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.addText='编辑账号'
      this.diong='E'
      this.addShowA=true
      this.disabledA = true
      this.disabled = false
      this.see=true
      this.xzData = this.itemData
    },
    //删除
    examine(){
      if (Object.keys(this.itemData).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除此数据吗?', '提示', {
        closeOnClickModal: false
      }).then(() => {
        deleSupplieManag({usrId:this.itemData.usrId}).then(()=>{
          this.$message ({
            type: 'success',
            message: '删除成功'
          })
          this.refreshList()
        })
      })
    },
    //密码重置
    cancel(){
      if (Object.keys(this.itemData).length == 0) {
        this.$alert('请选择需要重置密码的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要重置选定账户的密码吗?', '提示', {
        closeOnClickModal: false
      }).then(() => {
        czSupplieManag({usrId:this.itemData.usrId,usrName:this.itemData.usrName}).then(() =>{
          this.$message ({
            type: 'success',
            message: '密码重置成功！重置为Abc12345'
          })
          this.refreshList()
        })
      })


    },
    //双击查看
    rowdbClick(row){
      this.addText='查看账号'
      this.addShowA=true
      this.see=false
      this.disabledA = true
      this.disabled = true
      this.xzData = row
    },
    // 点击刷新
    viewDetails(){
      this.refreshList()
      this.$message ({
        type: 'success',
        message: '刷新成功'
      })

    },
    //新增 编辑  点击保存
    saveEditor(xzData){
      this.$refs[xzData].validate((valid) => {
        if (valid) {
          if (this.diong ==='E') {
            editSupplieManag(this.xzData).then(() =>{
              this.$message ({
                type: 'success',
                message: '编辑成功'
              })
              this.close()
              this.refreshList()
            })

          }else{
            if(this.ListData.fltStatus === 'Y'){
              addSupplieManag(this.xzData).then(() =>{
                this.$message ({
                  type: 'success',
                  message: '添加成功'
                })
                this.close()
                this.refreshList()
              })
            }else{
              this.$message.error('供应商未激活')
            }
          }
        } else {
          return false
        }
      })
    },
    //获取主列表当前行数据
    rowClick(row){
      this.itemData = row
    },
    //获取弹出框列表当前行数据
    rowdbClickA(row){
      this.ListData = row
      console.log(this.ListData)
      this.xzData.fltName= this.ListData.fltName
      this.xzData.usrEtpId = this.ListData.fltId
      this.showA =  false
      this.showB = false
      this.show =  true
    },
    // 关闭弹出框
    close(){
      this.addShowA=false
      this.showB = false
    },
    closeA(){
      this.showB = false
      this.showA =  false
      this.show =  true
    },
  }
}
</script>

<style  lang="scss" scoped>
.el-select {
  width: 100%;
}
.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  .table {
    flex: 1;
    position: relative;
    overflow: hidden;

    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
.box{
    display: inline-block;
    padding-left: 94%;
    padding-top: 21px;
}
</style>
